<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var panel='';
var menu = ['rightPanHome', 'rightPanProfile','rightPanWishList','rightPanOwnList','rightPanMessage'];
$(document).ready(function(){
  $(".rightPanItem").click(function(event){
     var temp='#'+$(this).next().attr('id')
     if((panel!='' || panel!='undefined' )&& panel!=temp){
    		 $(panel).slideUp();
     }
     $(this).next().toggle("fast");
     panel=temp;
     
  });
  
});

function ticker() {
    $('.ticker p:first').slideUp(function() {
        $(this).appendTo($('.ticker')).slideDown();
    });
}
setInterval(ticker, 5000);
function setAction(linkNum){
	if(linkNum==5){
		return;
	}
var menuLen=menu.length;	
	for(var i =0;i<menuLen;i++){
		document.getElementById(menu[i]).style.display='none';
	}
	document.getElementById(menu[linkNum]).style.display='block';
}

</script>
<title>Book Adda</title>

<style>
.body {
	 background: linear-gradient(#FFA319, #FFFF66, #FFFF66);
}

#mainContainer {
	height: 700px;
	width: 1040px;
	margin: 0px 100px 150px 150px;
	background-color: white;
	box-shadow: 0px 0px 25px 0px grey;
}

#header {
	width: 100%;
	background: #CC3300;
	height: 50px;
}

.DP {
	height: 150px;
	width: 150px;
	align: center;
}

#leftPan {
	width: 200px;
	height: 650px;
	border-right: 1px solid silver;
	float:left;
}

.rightPan{
	width: 600px;
	height: 650px;
	border-right: 1px solid silver;
	float:left;
}

#searchText {
	font-family: 'Bree Serif', serif;
	font-size: 20px;
	padding: 13px 0px 0px 60px;
	float: left;
}

.input {
	width: 188px;
	padding: 11px 25px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
		"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
	margin-left: 30px;
	margin-top: 5px; float : left; background : #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
	background: #fff;
	float: left
}

.leftPanList li {
	list-style-type: none;
	padding: 15px 20px 20px 0px;
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 18px;
	
}

.leftPanList li:hover {
background : #FEEF90;
cursor: pointer;
	
}

.rightPanList li {
	padding: 15px 20px 20px 0px;
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 18px;
	
}

.rightPanList li:hover {
/* background : #FEEF90; */
text-decoration: underline;
}


.button {
	float:left;
	padding: 9px 15px;
	
	font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 18px;
	color: #fff;
	text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
	margin-left: 30px;
	margin-top: 5px;
	background: #56c2e1;
	border: 1px solid #46b3d3;
	border-radius: 5px;
	cursor: pointer;
	
	box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.button:hover {
	background: #3f9db8;
	border: 1px solid rgba(256,256,256,0.75);
	
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.button:focus {
	position: relative;
	bottom: -1px;
	
	background: #56c2e1;
	
	box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
.home{
    height: 50px;
	width: 50px;
	align: center;
	float:left;
	padding-left : 5px;
	cursor : pointer;
}
.img{
padding-left:20px;
padding-top:5px;
}

.rightPan h1{
font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 28px;
color:  #999966;
border-bottom: 1px solid silver;
}

.rightPanItem{
font-family: 'Bree Serif', serif;
	font-weight: 300;
	font-size: 25px;
	cursor : pointer;
}

.ticker p{
border-bottom: 1px solid silver;
}
</style>
</head>
<body class="body">
	<div id="mainContainer">
		<div id="header">
			<!-- <div class="home"><img src="images/home.png"  class="home"></div> -->
			<div id="searchText">Search Books</div>
			<div id="searchTextBox">
				<input type="text" class="input"
					placeholder="Book Name, Author Name, Location etc." style="width: 388px;"/>
			</div>
			<div id="searchButton">
				<input type="button" name="button" value="Search" class="button" />
			</div>
		</div>
		<div id="leftPan">
			<div class="DP">
				<img src="images/user_2.png" class="DP img">
			</div>
			<div class="leftPanContent">
				<ul class="leftPanList">
					<li onclick="setAction(0);">Home</li>
					<li onclick="setAction(1);">Profile</li>
					<li onclick="setAction(2);">My Wishlist</li>
					<li onclick="setAction(3);">My OwnList</li>
					<li onclick="setAction(4);">Messages</li>
					<li onclick="setAction(5);">Logout</li>
				</ul>
			</div>
		</div>
		
	<!-- ------------------------- HOME SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- HOME SECTION STARTS HERE ------------------------- -->
	
		<div id="rightPanHome" class="rightPan">
			<h1>Books available near your address</h1>
			<ul class="rightPanList">
			<li>
				<div  class="rightPanItem">Harry Potter</div>
				<div id="book1" class="bookDesc" style="display : none;">
				<table width="100%">
					<tr>
						<td>User-1</td>
						<td>Pimple Saudagar, Kunal Icon</td>
						<td align="right"><a href="#">Leave a message</a></td>
					</tr>
					<tr>
						<td>User-2</td>
						<td>Infosys Phase2</td>
						<td align="right"><a href="#">Leave a message</a></td>
					</tr>
				</table>
				</div>
			</li>
			<li>
				<div class="rightPanItem">Shiva Triology - Oath of vayuputra</div>
				<div id="book2" class="bookDesc" style="display : none;">
				<table width="100%">
					<tr>
						<td>User-1</td>
						<td>Pimple Saudagar, Kunal Icon</td>
						<td align="right"><a href="#">Leave a message</a></td>
					</tr>
					<tr>
						<td>User-2</td>
						<td>Infosys Phase2</td>
						<td align="right"><a href="#">Leave a message</a></td>
					</tr>
				</table>
				</div>
			</li>
			</ul>
		</div>
		
	<!-- ------------------------- PROFILE SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- PROFILE SECTION STARTS HERE ------------------------- -->	
	
		<div id="rightPanProfile" style="display:none;" class="rightPan">
			<h1>Profile</h1>
			<ul class="rightPanList">
			<li>
				<div class="rightPanItem">Pesonal Details</div>
				<div id="personal1" class="personalDetails" style="display : none;">
				<table width="100%">
					<tr>
						<td>First Name</td>
						<td><input type="text" class="input"/></td>
					</tr>
					<tr>
						<td>Last Name</td>
						<td><input type="text" class="input"/></td>	
					</tr>
					<tr>
						<td>Email</td>
						<td><input type="text" class="input"/></td>	
					</tr>
					<tr>
						<td>Password</td>
						<td><input type="password" class="input"/></td>	
					</tr>
					<tr>
						<td style="padding:15px 0px 0px 0px;">Gender</td>
						<td style="padding:15px 0px 0px 35px;">Male<input type=radio name="gender" value="M">&nbsp;
						Female<input type=radio name="gender" value="F"></td>
					</tr>
				</table>
				</div>
			</li>
			<li>
				<div class="rightPanItem">Residential Address</div>
				<div id="personal2" class="rAddressDetails" style="display : none;">
				<table width="100%">
					<tr>
						<td>Flat/House No.</td>
						<td><input type="text" class="input"></td>						
					</tr>
					<tr>
						<td>Society/Locality</td>
						<td><input type="text" class="input"></td>						
					</tr>
					<tr>
						<td>Area</td>
						<td><input type="text" class="input"></td>						
					</tr>
					<tr>
						<td>City</td>
						<td><input type="text" class="input"></td>						
					</tr>
					<tr>
						<td>State</td>
						<td><Select name="state" class="input" style="width:240px;">
						<option value="">Select</option>
						<option value="MP">Madhya Pradesh</option>
						<option value="MH">Maharashtra</option>
						<option value="TN">Tamil Nadu</option>
						<option value="RJ">Rajasthan</option>
						</Select></td>					
					</tr>
					<tr>
						<td>Country</td>
						<td><Select name="country" class="input" style="width:240px;">
						<option value="">Select</option>
						<option value="IN">India</option>
						<option value="AU">Australia</option>
						<option value="US">USA</option>
						<option value="EN">England</option>
						</Select></td>						
					</tr>
					<tr>
						<td>Pincode</td>
						<td><input type="text" class="input"></td>						
					</tr>
				</table>
				</div>
			</li>
			</ul>
		</div>
		
	<!-- ------------------------- WISHLIST SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- WISHLIST SECTION STARTS HERE ------------------------- -->
		
		<div id="rightPanWishList" style="display:none;" class="rightPan">
			<h1>WishList</h1>
				<div>
				<p>Add books that you don't have and wish to exchange/borrow from other users who work in your company
				or study in your school/college or reside in the same locality/building.</p>
				</div>
				<div id="wishlist" class="wishListDetails">
				<table width="100%">
					<tr>
						<td><input type="text" class="input"/></td>
						<td><input type="button" value="Add" class="button"></td>
					</tr>
				</table>
				</div>
		</div>
		
		
	<!-- ------------------------- OWNLIST SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- OWNLIST SECTION STARTS HERE ------------------------- -->
		
		<div id="rightPanOwnList" style="display:none;" class="rightPan">
			<h1>WishList</h1>
				<div>
				<p>Add books that you have and wish to exchange/lend to other users.</p>
				</div>
				<div id="wishlist" class="wishListDetails">
				<table width="100%">
					<tr>
						<td><input type="text" class="input"/></td>
						<td><input type="button" value="Add" class="button"></td>
					</tr>
				</table>
				</div>
		</div>
		
		<!-- ------------------------- MESSAGE SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- MESSAGE SECTION STARTS HERE ------------------------- -->
		
		<div id="rightPanMessage" style="display:none;" class="rightPan">
			<h1>Inbox</h1>
				<div id="message" class="messageDetails">
				<table width="100%">
				<tr>
				<td>User 1 </td></tr>
				<tr><td>User 2 </td></tr>
				<tr><td>User 3 </td>
				</tr>	
				</table>
				</div>
		</div>
		
		<!-- ------------------------- TICKER SECTION STARTS HERE ------------------------- -->	
	<!-- ------------------------- TICKER SECTION STARTS HERE ------------------------- -->
			<div style="float:left;width:220px;" class="ticker">
					<p>Harrypotter has been added to the Wishlist by user 1</p>
					<p>Headfirst sql has been added to the Wishlist by user 2</p>
					<p>Oracle handbook has been added to the Ownlist by user 1</p>
					<p>Mein Kamf has been added to the OwnList by user 3</p>
					<p>God Father has been added to the Wishlist by user 3</p>
			</div>
	</div>
	
	
	
</body>
</html>